<template>
  <div>
    <router-link to='/login'>登录</router-link>
    <button @click="$router.push('/login')">登录</button>
    <router-link to='/login/?id=123'>登录</router-link>
    <!-- router的index.js需要配置/login/:id 懒得配置了-->
    <!-- 页面那边用this.$route.params||this.$route.query来接收 -->
    <router-link to='/login/123'>登录</router-link>
    <router-link to='/login/123?id=123&name=123'>登录</router-link>
    <button @click="$router.push('/login/123?id=123&name=123')">登录</button>
    <button @click="$router.push(path='/login',query={id: 123,})">登录</button>
    <!-- path和params无法共用,可以使用name匹配 -->
    <button @click="$router.push(name='login',query={id: 123,},params={name: '123'})">登录</button>
    <router-link to="/home">主页</router-link>
    <!-- 二级路由不加/匹配需要根据一级路由加二级路由 -->
    <router-link to="/home/first">主页</router-link>
    <!-- 加/直接跳,路径显示也不一样 -->
    <router-link to="/first">主页</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {};
  },
  created() {
    // this.$router
    //   .push({
    //     path: "/home",
    //   })
    //   .catch((err) => {});
  },
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
</style>
